/**
 * SD-LoRA校园图片生成系统 - 绘画功能
 */

// DOM元素
const toggleParamsBtn = document.getElementById('toggleParams');
const paramsPanel = document.getElementById('paramsPanel');
const guidanceScaleInput = document.getElementById('guidance_scale');
const guidanceScaleValue = document.getElementById('guidance_scale_value');
const modelCheckpoint = document.getElementById('model_checkpoint');
const samplerName = document.getElementById('sampler_name');
const enableHR = document.getElementById('enable_hr');

// 初始化参数面板状态
let paramsPanelVisible = false;

// 初始化
document.addEventListener('DOMContentLoaded', () => {
    // 确保后端URL已设置
    if (!window.backendUrl) {
        window.backendUrl = 'http://127.0.0.1:5000';
        console.log("绘画页面设置后端URL:", window.backendUrl);
    }
    
    // 初始化页面
    initializeDrawPage();

    // 参数面板切换按钮
    toggleParamsBtn.addEventListener('click', () => {
        paramsPanelVisible = !paramsPanelVisible;
        paramsPanel.style.display = paramsPanelVisible ? 'block' : 'none';
        toggleParamsBtn.classList.toggle('active', paramsPanelVisible);
    });

    // 提示词引导强度显示更新
    guidanceScaleInput.addEventListener('input', () => {
        guidanceScaleValue.textContent = guidanceScaleInput.value;
    });

    // 确保使用普通模型而非深度思考模型
    if (typeof chatModule !== 'undefined') {
        // 设置为绘画模式
        chatModule.setMode('draw');
        
        // 确保使用普通模型
        chatModule.setModel('deepseek-chat');
    }

    // 覆盖默认的图片生成处理函数
    overrideImageGenerationHandler();
});

/**
 * 初始化绘画页面
 */
function initializeDrawPage() {
    // 隐藏参数面板（默认）
    paramsPanel.style.display = 'none';
    
    // 添加图片生成例子
    addExamplesIfNeeded();
}

/**
 * 如果聊天区域为空，添加示例
 */
function addExamplesIfNeeded() {
    const chatArea = document.getElementById('chatArea');
    if (chatArea && chatArea.children.length <= 1) { // 只有loading元素时
        // 创建欢迎界面
        const welcomeScreen = document.createElement('div');
        welcomeScreen.className = 'welcome-screen drawing-welcome';
        welcomeScreen.id = 'drawingWelcomeScreen';
        welcomeScreen.innerHTML = `
            <h2>欢迎使用智慧绘画</h2>
            <p>详细描述您想要的图片，AI将为您生成精美图像</p>
            
            <div class="drawing-tags">
                <span class="drawing-tag">校园风光</span>
                <span class="drawing-tag">建筑设计</span>
                <span class="drawing-tag">人物肖像</span>
                <span class="drawing-tag">动漫风格</span>
                <span class="drawing-tag">自然风景</span>
                <span class="drawing-tag">写实风格</span>
                <span class="drawing-tag">科幻场景</span>
            </div>

            <div class="example-images">
                <div class="example-image" data-prompt="一个女孩坐在DTS食堂椅子上吃饭的图片">
                    <img src="./static/img/campus_image_1.png" alt="食堂内景">
                </div>
                <div class="example-image" data-prompt="一个女孩在DTS操场打篮球的图片">
                    <img src="./static/img/campus_image_2.png" alt="操场外景">
                </div>
                <div class="example-image" data-prompt="一个女孩在DTS10号楼坐在椅子上看书的图片">
                    <img src="./static/img/campus_image_3.png" alt="10号楼内景">
                </div>
                <div class="example-image" data-prompt="一个女孩在DTS实操教室坐在椅子上使用电脑写代码的图片">
                    <img src="./static/img/campus_image_4.png" alt="教室内景">
                </div>
            </div>

            <div class="drawing-tips">
                <h3>提示词技巧</h3>
                <p>1. 描述越详细，生成效果越好</p>
                <p>2. 可以指定风格，如"油画风格"、"写实风格"等</p>
                <p>3. 指定场景的光线、氛围和颜色</p>
            </div>
        `;
        chatArea.appendChild(welcomeScreen);
        
        // 绑定示例图片点击事件
        const exampleImages = document.querySelectorAll('.example-image');
        exampleImages.forEach(example => {
            example.addEventListener('click', () => {
                const prompt = example.getAttribute('data-prompt');
                if (prompt && userInput) {
                    userInput.value = prompt;
                    userInput.focus();
                }
            });
        });
        
        // 绑定标签点击事件
        const drawingTags = document.querySelectorAll('.drawing-tag');
        drawingTags.forEach(tag => {
            tag.addEventListener('click', () => {
                if (userInput) {
                    const tagText = tag.textContent;
                    if (userInput.value) {
                        userInput.value += `，${tagText}风格`;
                    } else {
                        userInput.value = `${tagText}风格`;
                    }
                    userInput.focus();
                }
            });
        });
    }
}

/**
 * 覆盖默认的图片生成处理函数
 */
function overrideImageGenerationHandler() {
    // 保存原始函数
    const originalHandleImageGeneration = window.handleImageGeneration;
    
    // 覆盖函数
    window.handleImageGeneration = function(messageElement, params) {
        // 获取用户设置的参数
        const width = document.getElementById('width').value;
        const height = document.getElementById('height').value;
        const userBatchSize = document.getElementById('batch_size').value;
        const steps = document.getElementById('steps').value;
        const guidanceScale = guidanceScaleInput.value;
        const samplerIndex = samplerName.value;
        const modelCheckpointValue = modelCheckpoint.value;
        const enableHRValue = enableHR.checked;
        
        // 创建高级设置参数对象
        const advancedSettings = {
            width: parseInt(width),
            height: parseInt(height),
            batch_size: parseInt(userBatchSize),
            steps: parseInt(steps),
            guidance_scale: parseFloat(guidanceScale),
            sampler_index: samplerIndex,
            enable_hr: enableHRValue,
            hr_scale: 2,
            hr_upscaler: "ESRGAN_4x",
            hr_second_pass_steps: 15,
            denoising_strength: 0.3,
            sd_model_checkpoint: modelCheckpointValue
        };
        
        console.log("绘画高级设置参数:", advancedSettings);
        
        // 创建图片网格容器（如果不存在）
        let imageGrid = messageElement.querySelector('.image-grid');
        if (!imageGrid) {
            imageGrid = document.createElement('div');
            imageGrid.className = 'image-grid';
            
            // 根据batch_size决定网格样式
            if (parseInt(userBatchSize) <= 2) {
                imageGrid.classList.add('grid-2');
            } else {
                imageGrid.classList.add('grid-4');
            }
            
            // 添加占位符
            for (let i = 0; i < parseInt(userBatchSize); i++) {
                const placeholderDiv = document.createElement('div');
                placeholderDiv.className = 'image-item';
                placeholderDiv.dataset.index = i;
                
                const placeholder = document.createElement('div');
                placeholder.className = 'image-placeholder';
                
                const spinner = document.createElement('div');
                spinner.className = 'loading-spinner';
                
                placeholder.appendChild(spinner);
                placeholderDiv.appendChild(placeholder);
                imageGrid.appendChild(placeholderDiv);
            }
            
            // 添加到消息元素
            messageElement.appendChild(imageGrid);
        }
        
        // 添加明确的状态指示器
        let statusIndicator = messageElement.querySelector('.generation-status');
        if (!statusIndicator) {
            statusIndicator = document.createElement('div');
            statusIndicator.className = 'generation-status';
            statusIndicator.innerHTML = '<p>图片生成中，请耐心等待(可能需要1-3分钟)...</p>';
            if (imageGrid) {
                imageGrid.parentNode.insertBefore(statusIndicator, imageGrid.nextSibling);
            } else {
                messageElement.appendChild(statusIndicator);
            }
        }
        
        // 检查是否已存在参数摘要，如果不存在，创建一个临时的
        let paramSummary = messageElement.querySelector('.params-summary');
        if (!paramSummary) {
            paramSummary = document.createElement('div');
            paramSummary.className = 'params-summary temp-params-summary';
            paramSummary.innerHTML = `
                <h4>生成参数</h4>
                <ul>
                    <li>提示词：${params.prompt}</li>
                    <li>正在获取详细参数...</li>
                </ul>
            `;
            messageElement.appendChild(paramSummary);
        }
        
        // 调用API时传递高级设置参数
        fetch('/api/generate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                params: params,
                session_id: window.chatModule.getCurrentSessionId(),
                message_id: window.currentMessageId,
                advanced_settings: advancedSettings
            })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`服务器返回错误: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            // 移除状态指示器
            if (statusIndicator) {
                statusIndicator.remove();
            }
            
            // 使用后端返回的参数更新UI
            if (data.params) {
                // 更新参数摘要
                const paramSummary = messageElement.querySelector('.params-summary');
                if (paramSummary) {
                    paramSummary.innerHTML = `
                        <h4>生成参数</h4>
                        <ul>
                            <li>提示词：${data.params.prompt || params.prompt}</li>
                            <li>图片数量：${data.params.batch_size || 1}</li>
                            <li>图片尺寸：${data.params.width || 512}x${data.params.height || 512}</li>
                            <li>生成步数：${data.params.steps || 30}</li>
                            <li>提示词引导强度：${data.params.guidance_scale || 7.5}</li>
                            ${data.params.sampler_index ? `<li>采样方法：${data.params.sampler_index}</li>` : ''}
                            ${data.params.override_settings?.sd_model_checkpoint ? `<li>模型：${data.params.override_settings.sd_model_checkpoint}</li>` : ''}
                            ${data.params.enable_hr ? `<li>超分辨率：已启用(${data.params.hr_scale || 2}倍)</li>` : ''}
                        </ul>
                    `;
                    
                    // 移除临时标记类
                    paramSummary.classList.remove('temp-params-summary');
                }
                
                // 处理图片
                if (data.images && data.images.length > 0) {
                    const imageGrid = messageElement.querySelector('.image-grid');
                    if (imageGrid) {
                        // 更新图片
                        data.images.forEach((imageUrl, index) => {
                            const imageItem = imageGrid.querySelector(`[data-index="${index}"]`);
                            if (imageItem) {
                                // 创建图片元素
                                const img = document.createElement('img');
                                
                                // 处理图片URL路径，确保可以正确加载
                                if (imageUrl.startsWith('http')) {
                                    // 外部URL直接使用
                                    img.src = imageUrl;
                                } else if (imageUrl.startsWith('/static')) {
                                    // 相对于后端的静态路径，需要调整
                                    img.src = window.backendUrl + imageUrl;
                                } else {
                                    // 其他情况，使用相对路径
                                    img.src = imageUrl;
                                }
                                
                                img.alt = `生成图片 ${index + 1}`;
                                img.addEventListener('load', () => {
                                    imageItem.innerHTML = '';
                                    imageItem.appendChild(img);
                                    
                                    // 添加点击事件
                                    img.addEventListener('click', () => {
                                        const modalImage = document.getElementById('modalImage');
                                        const imageModal = document.getElementById('imageModal');
                                        if (modalImage && imageModal) {
                                            modalImage.src = img.src;
                                            imageModal.classList.add('active');
                                        }
                                    });
                                });
                                
                                img.addEventListener('error', () => {
                                    console.error(`图片加载失败: ${imageUrl}`);
                                    imageItem.innerHTML = `<div class="error-overlay"><i class="material-icons">broken_image</i><span>图片加载失败</span></div>`;
                                });
                            }
                        });
                    }
                }
            }
        })
        .catch(error => {
            console.error("图片生成失败:", error);
            
            // 移除状态指示器
            if (statusIndicator) {
                statusIndicator.remove();
            }
            
            // 更新错误状态
            const paramSummary = messageElement.querySelector('.params-summary');
            if (paramSummary) {
                paramSummary.classList.remove('temp-params-summary');
                paramSummary.classList.add('error-message');
                paramSummary.innerHTML = `
                    <div class="error-title">生成失败</div>
                    <p>${error.message || '未知错误'}</p>
                    <button class="retry-btn">重试</button>
                `;
                
                // 添加重试按钮事件
                const retryBtn = paramSummary.querySelector('.retry-btn');
                if (retryBtn) {
                    retryBtn.addEventListener('click', () => {
                        // 移除错误消息
                        paramSummary.remove();
                        // 重新生成
                        window.handleImageGeneration(messageElement, params);
                    });
                }
            }
        });
    };
}

// 重写 displayUserMessage 函数，在发送消息时不移除欢迎屏幕
(function() {
    if (typeof window.originalDisplayUserMessage === 'undefined') {
        // 保存原始函数
        window.originalDisplayUserMessage = window.displayUserMessage;
    
        // 重写函数
        window.displayUserMessage = function(message) {
            const messageDiv = window.originalDisplayUserMessage(message);
            
            // 不删除欢迎界面，只是隐藏它
            const welcomeScreen = document.getElementById('drawingWelcomeScreen');
            if (welcomeScreen) {
                welcomeScreen.style.display = 'none';
            }
            
            return messageDiv;
        };
    }
})();

// 监听 chatArea 内容变化，在没有消息时显示欢迎界面
(function() {
    // 使用MutationObserver监听chatArea的变化
    const chatArea = document.getElementById('chatArea');
    if (chatArea) {
        const observer = new MutationObserver(function(mutations) {
            // 检查是否有用户消息或AI消息
            const hasMessages = chatArea.querySelector('.user-message') || chatArea.querySelector('.ai-message');
            
            // 获取欢迎屏幕
            const welcomeScreen = document.getElementById('drawingWelcomeScreen');
            
            // 如果没有消息且欢迎屏幕存在，显示欢迎屏幕
            if (!hasMessages && welcomeScreen) {
                welcomeScreen.style.display = 'block';
            }
        });
        
        // 配置观察选项
        const config = { childList: true, subtree: true };
        
        // 开始观察
        observer.observe(chatArea, config);
    }
})();

// 更新聊天模块的函数，确保使用普通模型
if (typeof chatModule !== 'undefined' && typeof chatModule.toggleReasoningMode === 'function') {
    // 确保使用普通模型 (deepseek-chat)
    chatModule.toggleReasoningMode(false);
} 